<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :background="{ backgroundColor: !isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        title="举报"
      >
      </u-navbar>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <!-- 请选择举报类型 -->
      <!-- 请选择举报类型 -->
      <!-- 请选择举报类型 -->
      <view class="text-[14px] text-[#171B24]"> 请选择举报类型*</view>
      <view class="grid grid-cols-3 gap-4">
        <view
          class="col-span-1 flex justify-center items-center rounded-[18px] py-2 border border-solid"
          v-for="(i, k) in reportData"
          :key="k"
          @click="report_type = i.id"
          :class="report_type == i.id ? 'text-[#00A9AB] bg-[#E5F6F6] border-[#00A9AB] ' : 'text-[#171B24] bg-[#F4F6F8]  border-transparent'"
        >
          <text class="text-[12px]">{{ i.name }}</text>
        </view>
      </view>
      <!-- 描述举报内容* -->
      <!-- 描述举报内容* -->
      <!-- 描述举报内容* -->
      <view class="text-[14px] text-[#171B24] mt-4"> 描述举报内容*</view>
      <view class="bg-[#F4F6F8] rounded-[12px] flex flex-col gap-2 p-4">
        <textarea
          auto-height
          maxlength="200"
          placeholder="请描述举报内容"
          class="w-full text-[14px] text-[#171B24]"
          v-model="report_content"
        ></textarea>
        <view class="flex justify-between">
          <text></text>
          <text class="text-[12px] text-[#C1C4C9]">{{ report_content.length }}/200</text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="text-[14px] text-[#171B24] flex gap-1 items-center mt-4">
        <text>上传图片</text>
        <text class="text-[12px] text-[#C1C4C9]">{{ iamgesList.length }}/3</text>
      </view>
      <view class="grid grid-cols-3 gap-3">
        <view class="bg-[#F4F6F8] rounded-[8px] aspect-square flex justify-center items-center relative border" v-for="(i, k) in iamgesList" :key="k">
          <image
            :src="i"
            class="size-full"
            mode="scaleToFill"
            @click="
              vk.myfn.previewImage({
                urls: iamgesList,
                current: k
              })
            "
          />
          <view
            @click="deleteImage(k)"
            class="w-[20px] h-[20px] bg-[#000000]/40 rounded-[0px_8px_0px_8px] absolute right-0 top-0 flex justify-center items-center"
          >
            <u-icon name="close" color="#fff" size="20"></u-icon>
          </view>
        </view>
        <view v-if="iamgesList.length < 3" @click="uploads" class="bg-[#F4F6F8] rounded-[8px] aspect-square flex justify-center items-center">
          <image src="/static/iconAddGr@3X.png" class="size-[28px]" mode="scaleToFill" />
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="px-4 py-3">
        <view class="flex justify-center">
          <view
            class="h-[44px] bg-[#00A9AB] active:scale-95 active:bg-[#00A9AB]/80 duration-300 w-full rounded-full flex items-center justify-center"
            @click="submit"
          >
            <text class="text-[16px] text-[#E5F6F6]">提交</text>
          </view>
        </view>
      </view>
    </template>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        action: 'http://www.example.com/upload',
        reportData: [],
        //
        iamgesList: [],
        report_content: '',
        report_type: '',
        client: null
      }
    },
    onLoad() {
      this.getReportTypes()
    },
    methods: {
      async uploads() {
        try {
          const url = await vk.myfn.uploadImage({
            count: 1,
            topic: 'products'
          })
          this.iamgesList.push(url)
        } catch (err) {
          console.error('上传失败:', err)
        }
      },

      deleteImage(k) {
        // 删除指定索引的图片
        vk.confirm('是否确认删除该图片', res => {
          if (res.confirm) {
            this.iamgesList.splice(k, 1)
          }
        })
      },
      // 提交
      async submit() {
        if (!this.report_content) {
          vk.toast('请输入举报内容')
          return
        }
        if (!this.iamgesList.length) {
          vk.toast('请上传图片')
          return
        }
        const data = {
          type: 1, // 目标类型: 1 = 钓点
          target_id: 1, // 目标的唯一ID
          report_type: this.report_type, // 举报类型: 1 = 其他
          report_content: this.report_content, // 举报内容: 这里填写具体的举报信息
          images: this.iamgesList.join('|') // 图片列表: 多张图片用|分隔
        }

        let res = await api.reportBasan(data)
        vk.toast(res.msg, 'none')
        if (!res.code) return

        vk.navigateBack()
      },
      // 获取举报类型
      async getReportTypes() {
        let res = await api.reportType()
        if (!res.code) return
        this.reportData = res.data
        this.report_type = res.data[0].id
      },
      //
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff !important;
  }
</style>
